<template>
  <div class="body_main">
    <!-- <van-cell-group>
			<van-cell value="兑换详情" />
		</van-cell-group> -->
		<h2>兑换详情</h2>
    <section class="tkdetails-content">
  		<div class="ykdetails" v-for="(item,index) in orderdetail" :key="index">
  			<div class="ykdetails_m">
  				<h3>中石化油卡充值卡</h3>
  				<ul>
  					<li><span>面值</span><span>{{item.money}}</span></li>
  					<li><span>卡号</span><span>{{item.cardNo}}</span></li>
  					<li><span>卡密</span><span>{{item.cardPassword}}</span></li>
  					<li><span>充值卡截止日期</span><span class="red">{{item.expireTime}}</span></li>
  				</ul>
  			</div>
  		</div>
    </section>
		<van-submit-bar
			button-text="前往充值"
			@submit="onSubmit"
		>
			<span class="span_test" @click="sysmFun">油卡充值卡使用说明<img class="jticon" :src="Upicon" /></span>
		</van-submit-bar>
		<van-actionsheet v-model="show" title="油卡充值卡使用说明">
			<img class="instructions" :src="Instructions" />
			<van-submit-bar
				button-text="前往充值"
				@submit="onSubmit"
			>
				<span class="span_test" @click="sysmFun2">油卡充值卡使用说明<img class="jticon" :src="Downicon" /></span>
			</van-submit-bar>
		</van-actionsheet>
  </div>
</template>

<script>

import { getOilInfo } from "../../../api/ykdetails.js";
import ykImg from '../../../assets/img/yk.jpg';
import Instructions from '../../../assets/img/instructions.jpg';
import upicon from '../../../assets/img/upicon.jpg';
import downicon from '../../../assets/img/downicon.jpg';
export default {
  name: 'ykdetails',
  data() {
    return {
			show: false,
			checked: false,
			Instructions:Instructions,
			Upicon:upicon,
			Downicon:downicon,
			InfoParameter:{
				exchangeId: this.$route.query.exchangeId
			},
			orderdetail:[]
    };
  },
	created() {
		console.log('22',this.$route.query.exchangeId);
		this.InfoParameter.exchangeId = this.$route.query.exchangeId;
		this.detailsFun();
	},
  computed: {
  },

  methods: {
		detailsFun(){
			if(this.$route.query.status === '兑换'){
				this.InfoParameter.status = 2;
			}
			if(this.$route.query.status === '失效'){
				this.InfoParameter.status = 0;
			}
			if(this.$route.query.status === '收益'){
				this.InfoParameter.status = 1;
			}
			console.log(this.$route.query.id);
			getOilInfo(this.InfoParameter).then((res) => {
				if(res.status === 200) {
					this.orderdetail = res.data;
				}
			}).catch(error => {
        if (error.status !== 100 && error.status !== 102 ) {
          this.$toast.fail(error.message);
        }
      })
		},
    onSubmit() {
			// Toast('点击结算');
			window.open('http://www.sinopecsales.com/');
		},
		sysmFun() {
			console.log("111")
			this.show = true;
		},
		sysmFun2() {
			console.log("222")
			this.show = false;
		}
  }
};
</script>

<style lang="less" scoped>
.body_main {
	position: fixed;width: 100%;height: 100%;
	background: #F2F2F2;padding-bottom: 80px;
	h2{
		background: #ffffff;
		text-align: center;
		height:50px;
		font-size:16px;
		font-family:PingFang SC;
		line-height:50px;
		color:#333333;
		opacity:1;
		border-bottom: 1px solid #E6F1F4;
  }
  .tkdetails-content{
    height: calc( 100% - 102px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}
// .ykdetails:nth-of-type(1) {padding-bottom: 10px;}
.ykdetails {
	background: #F2F2F2;padding: 10px 0 0;
	.ykdetails_m{
		background: #fff;
		h3{height: 60px;line-height: 60px;font-size: 18px;color: #333333;text-align: center;border-bottom: 1px solid #E6F1F4;font-weight:300;}
		ul{
			padding: 20px;
			li{
				height: 25px;line-height: 25px;
				span{color: #888888;}
				span:nth-of-type(2){float: right;color: #333333;}
			}
		}
	}
}
.red {color: #F80606 !important;}
.instructions {width: 100%;height: auto; display: block;margin: 0 auto;margin-bottom: 50px;padding-bottom:20px;margin-top: 12px;}
.span_test {margin-left: 20px;color: #1A8EBF;}
// .van-actionsheet{height: 450px;}
.van-submit-bar {border-top: 1px solid #EFEFEF;}
.jticon {height: 15px;width: auto;margin-bottom: 1px;margin-left: 3px;}
</style>
